<template>
  <div class="greetings">
    <el-row class="tac">
      <el-col :span="24">
        <el-affix :offset="10">
          <el-menu
              active-text-color="#ffd04b"
              background-color="#545c64"
              class="el-menu-vertical-demo"
              default-active="1"
              :default-openeds="openMenusIndex"
              text-color="#fff"
          >
            <el-sub-menu index="1">
              <template #title>
                <span>社区发现</span>
              </template>
              <router-link to="index">
                <el-menu-item index="1-1">
                  系统主页
                </el-menu-item>
              </router-link>
              <router-link to="fileupload">
                <el-menu-item index="1-2">
                  文件上传
                </el-menu-item>
              </router-link>
              <router-link to="graph">
                <el-menu-item index="1-3">
                  效果展示
                </el-menu-item>
              </router-link>
            </el-sub-menu>

          </el-menu>
        </el-affix>
      </el-col>
    </el-row>
  </div>
</template>

<script lang="ts" setup>

const openMenusIndex: string[] = ["1", "2", "3"];
</script>

<style scoped>
h4 {
  font-size: 0.9rem;
}

.greetings h1,
.greetings h3 {
  text-align: center;
}

@media (min-width: 1024px) {
  .greetings h1,
  .greetings h3 {
    text-align: left;
  }
}
</style>

